<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 350px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div id="chart_example"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
         // 日期范围
        dateRange: [],
        queryParams:{}
      }
    },
    mounted() {
      this.initChart();
    },
    methods: {
      /** 查询 */
      getList() {
        this.loading = true;
        listBar(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
        // listBar(this.queryParams).then(response => {
          this.MapList =response.rows;
          // console.log( "柱状图数据：" + this.MapList);         //数据有获取到
          let MapList = this.MapList;
          if(MapList){
            let obj = eval(MapList);

            for(let i=0;i<obj.length;i++){
              this.curPos.push(MapList[i].curPos);
            }
            for(let i=0;i<obj.length;i++){
              this.sum.push(MapList[i].sum);
            }
          }
          
          //动态插入数据时，数据在这里设置更新
          this.chart.setOption({
            xAxis: {
              data: this.curPos,
              axisTick:{
                show:false
              }
            },
            series: [{
              data: this.sum,
            },
            ]
          });
        });
      },
      initChart(){
      let this_ = this;
      let myChart = echarts.init(document.getElementById('chart_example'));
      let option = {
        title:{
            text:'格口分拣统计',
            subtext:'纯属虚构',
            left:'center',
            textStyle:{
              color: '#000000'
            }
          },
        color: ['#3398DB'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          }
        },
        grid: {
            top: 60,
            left: '2%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
        xAxis : [
          {
            name:'格口编号',
            type : 'category',
            data : ['CHK101','CHK102','CHK103','CHK104','CHK105','CHK106','CHK107','CHK108','CHK109','OFA1','EPA101','EPA102'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            name:'分拣数量',
            type : 'value'
          }
        ],
        series : [
          {
            name:'分拣总数量',
            type:'bar',
            barWidth: '40%',
            label: {
              normal: {
                  show: true,                
                  position: 'top',
                  formatter: '{c}'
              }
            },
            data:[995,666,444,858,654,236,645,546,846,225,547,356]
          }
        ]
      };
        myChart.setOption(option);
 
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize',function() {myChart.resize()});
      },
      /** 搜索按钮操作 */
      handleQuery() {
        // this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
    },
    watch: {},
    created() {
 
    }
  }
</script>

<style scoped>
  #chart_example{
    width: 100%;
    height: 60vh;
    /* border: 1px solid	#C0C0C0; */
    margin: 0 auto;
  }
</style>

